<template>
  <div>
    <el-dialog
      v-model="props.visible"
      title="设备/机台列表"
      width="70%"
      @close="handleCancel"
    >
      <el-form :model="queryParams" ref="queryRef" :inline="true">
        <el-row>
          <el-form-item label="车间名称" prop="workshopName">
            <!--<el-input
                                v-model.trim="queryParams.workshopName"
                                style="width: 200px"
                                placeholder="请输入车间名称"
                                clearable
                                @keyup.enter="handleQuery"
                        />-->
            <el-select
              @change="handleQuery"
              v-model="queryParams.workshopName"
              clearable
              style="width: 180px"
              placeholder="请选择"
            >
              <el-option
                v-for="item in workshopOptions"
                :key="item.name"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="设备编码" prop="machineNo">
            <el-input
              v-model.trim="queryParams.machineNo"
              style="width: 200px"
              placeholder="请输入设备编码"
              clearable
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="设备名称" prop="machineName">
            <el-input
              v-model.trim="queryParams.machineName"
              style="width: 200px"
              placeholder="请输入设备名称"
              clearable
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">
              搜索
            </el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-row>
      </el-form>
      <el-table
        v-loading="loading"
        :data="userList"
        stripe
        border
        height="65vh"
        style="cursor: pointer"
        @cell-click="handleCellClick"
      >
        <el-table-column label="序号" width="60" type="index" align="center" />
        <el-table-column
          label="设备编码"
          align="center"
          prop="machineNo"
          min-width="160"
        ></el-table-column>
        <el-table-column
          label="设备名称"
          align="center"
          prop="machineName"
          min-width="220"
        />
        <el-table-column
          label="负责人"
          align="center"
          prop="headUserName"
          min-width="120"
        />
        <el-table-column
          label="车间编码"
          align="center"
          prop="workshopNo"
          min-width="150"
        />
        <el-table-column
          label="车间名称"
          align="center"
          prop="workshopName"
          min-width="90"
        />
        <el-table-column
          label="版材尺寸"
          align="center"
          prop="size"
          min-width="100"
        >
          <template v-slot="{ row }">
            <dict-tag :options="ems_machine_info_size" :value="row.size" />
          </template>
        </el-table-column>
        <el-table-column
          label="损耗比例(%)"
          align="center"
          prop="wasteRate"
          width="100"
        >
          <template v-slot="{ row }">
            <dict-tag
              :options="ems_machine_info_waste_rate"
              :value="row.wasteRate"
            />
          </template>
        </el-table-column>
        <el-table-column label="机型" align="center" prop="model" width="80">
          <template v-slot="{ row }">
            <dict-tag :options="ems_machine_info_model" :value="row.model" />
          </template>
        </el-table-column>
        <el-table-column
          label="产能(令/时、吨/时)"
          align="center"
          min-width="100"
          prop="capacity"
        />
        <el-table-column label="类型" align="center" prop="type" width="80">
          <template v-slot="{ row }">
            <dict-tag :options="ems_machine_info_type" :value="row.type" />
          </template>
        </el-table-column>

        <el-table-column
          label="负责人电话"
          align="center"
          prop="headUserPhone"
          min-width="120"
        />
      </el-table>
      <div class="footer">
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
const emit = defineEmits(["changeUpdate"]);
import { getList as getDataList } from "@/api/basicInfo/workbench";
import { getMesWorkShop } from "@/api/basicInfo/workshop.js";
const { proxy } = getCurrentInstance();
const workshopOptions = ref([]);
const {
  ems_machine_info_size,
  ems_machine_info_waste_rate,
  ems_machine_info_model,
  ems_machine_info_type,
} = proxy.useDict(
  "ems_machine_info_size",
  "ems_machine_info_waste_rate",
  "ems_machine_info_model",
  "ems_machine_info_type"
);

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  machineType: {
    type: String,
    default: undefined,
  },
  search: {
    type: Object,
    default: () => {
      {
      }
    },
  },
  params: {
    type: Object,
    default: () => {
      {
      }
    },
  },
});
watch(
  () => props.visible,
  (val) => {
    if (val) {
      handleQuery();
    }
  }
);
const userList = ref([]);
const loading = ref(false);
const queryParams = ref({
  pageNum: 1,
  pageSize: 50,
  status: 2,
  machineName: undefined,
  machineNo: undefined,
});
const total = ref(0);

// 选中当前行
const handleCellClick = (row) => {
  proxy.$modal
    .confirm("是否确认选择「" + row.machineName + "」")
    .then(function () {
      emit("changeUpdate", row);
    })
    .catch(() => {});
};

const handleCancel = () => {
  queryParams.value.type = "";
  proxy.resetForm("queryRef");
  emit("cancel");
};
const getList = async () => {
  //debugger
  loading.value = true;
  if (props.machineType) {
    queryParams.value.type = props.machineType;
  }
  if (props.search) {
    queryParams.value = { ...queryParams.value, ...props.search };
  }
  const res = await getDataList(queryParams.value);
  loading.value = false;
  userList.value = res.rows;
  total.value = res.total;
};
// 搜索
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
  queryParams.value.type = "";
  proxy.resetForm("queryRef");
  handleQuery();
};

const getWorkShopList = async () => {
  const res = await getMesWorkShop({ ...queryParams.value });
  workshopOptions.value = [...res.rows];
};
// getList()
getWorkShopList();
</script>

<style lang="scss" scoped></style>
